<template>
  <el-skeleton :loading="isFirst" :rows="15" animated>
    <div class="exam-container">
      <el-descriptions :column="2" border>
        <template #title>
          {{ name }}
        </template>
        <el-descriptions-item label="开始时间" label-align="left" :span="1">
          {{ beginTime }}
        </el-descriptions-item>

        <el-descriptions-item label="结束时间" label-align="left" :span="1">
          {{ endTime }}
        </el-descriptions-item>

        <el-descriptions-item label="状态" label-align="left" :span="1">
          <!-- <el-tag
                type="success"
                size="small"
                v-if="isCheck == 0 && isFinish==0||  isCheck == 1 && isFinish==1 "
                >已结束,已阅卷</el-tag
              > 


                <el-tag
                type="danger"
                size="small"
                v-else
                >已结束,待阅卷</el-tag
              >
            
            -->
          <el-tag
            type="success"
            size="small"
            v-if="visibles == 'none' && weikaishi == false && kaoshizhong == false"
            >已结束,已阅卷</el-tag
          >

          <el-tag type="success" size="small" v-if="weikaishi == true">未考试</el-tag>

          <el-tag type="success" size="small" v-if="kaoshizhong == true">考试中</el-tag>

          <el-tag
            type="danger"
            size="small"
            v-if="visibles == '' && weikaishi == false && kaoshizhong == false"
            >已结束,待阅卷</el-tag
          >
        </el-descriptions-item>

        <el-descriptions-item label="阅卷时间" label-align="left" :span="1">
          <el-tag type="primary" size="small">{{ finishTime }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="考试人数" label-align="left" :span="1">
          <el-tag type="primary" size="small">{{ userExams.length }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="及格人数" label-align="left" :span="1">
          <el-tag type="primary" size="small">{{ passCount }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="及格率" label-align="left" :span="1">
          <el-tag type="primary" size="small">{{ stopCountDown }}%</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="	平均分" label-align="left" :span="1">
          <el-tag type="primary" size="small">{{ avgScore }}分</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <h4 style="margin: 10px 0 10px 0">答题详情</h4>

      <el-table :data="userExams" v-loading="isLoad" :border="true">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        </el-table-column>
        <el-table-column label="得分" prop="count" width="100">
          <template #default="scope">
            {{ scope.row.score == null || scope.row.score == 0 ? 0 : scope.row.score }}
          </template>
        </el-table-column>

        <el-table-column label="开考时间" prop="lv" width="100">
          <template #default=""> - </template>
        </el-table-column>

        <el-table-column label="交卷时间" prop="lv" width="100">
          <template #default> - </template>
        </el-table-column>

        <el-table-column label="阅卷" :show-overflow-tooltip="true">
          <template #default="scope" v-if="visibles == ''">
            <el-tag
              type="danger"
              size="small"
              v-if="scope.row.isAbsent == 1 && scope.row.isCheck == 0"
              >缺考</el-tag
            >
            <el-tag
              type="success"
              size="small"
              v-if="scope.row.isAbsent == 0 && scope.row.isCheck == 1"
              >已确认</el-tag
            >
          </template>

          <template #default v-if="visibles == 'none'">
            <el-tag type="success" size="small">是</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="阅卷时间" prop="finishTime" :show-overflow-tooltip="true">
          <template #default="">
            {{ finishTime }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              :loading="btnLoad"
              :disabled="weikaishi == true || kaoshizhong == true"
              @click="verify(scope.row)"
              v-if="scope.row.isAbsent == 1 && scope.row.isCheck == 0 && visibles != 'none'"
              >确认</el-button
            >

            <el-button
              type="info"
              size="small"
              :loading="btnLoad"
              @click="verify(scope.row)"
              v-if="scope.row.isAbsent == 0 && scope.row.isCheck == 1"
              >取消</el-button
            >

            <el-button
              type="success"
              size="small"
              :loading="btnLoad"
              @click="getAnswerSheets(scope.row)"
              :disabled="scope.row.id == null"
              >答题卡</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-button
        type="primary"
        style="margin-top: 10px"
        :disabled="ok_btn"
        @click="complete_review"
        :style="{ display: visibles }"
        >完成阅卷</el-button
      >
    </div>
  </el-skeleton>

  <div>
    <div class="dialog_bigbox">
      <el-dialog v-model="dialogTableVisible" fullscreen :title="titleName">
        <div class="dtkTag">答题卡</div>

        <div class="exam-container top">
          <div style="position: relative">
            <div v-for="(item, index) in dtkData" 
            :key="index" 
             :class="item.isRight==1?'top-xuan-green':' top-xuan-red'" @click="checkOptions(index)">
              {{ index + 1 }}
            </div>
          </div>
    
        </div>
        <el-divider content-position="center">答题详情</el-divider>

        <div class="exam-container content">
          <div>
            <el-tag>{{ index + 1 }}.选择题.{{ dtkData[index].fraction }}分</el-tag>
          </div>
          <el-divider content-position="left">题干</el-divider>

          <!-- <div v-html="dtkData[index].content">{{dtkData[index].content}}</div>  -->
          <p v-html="dtkData[index].content"></p>
          <div class="exam-container content">

            <div class="options">
              <div v-for="(item, dindex) in dtkData[index].options"
               :key="dindex"
               class="oa"
                >
               <div v-if="item.isRight==1 " class="okOptions"> {{xuan[dindex]}}.{{item.content}}</div>
               <div v-else-if=" dtkData[index].answer==item.id " class="errorOptions"> {{xuan[dindex]}}.{{item.content}}</div>
               <div v-else> {{xuan[dindex]}}.{{item.content}}</div>
              </div>
            </div>

          </div>

        <div style="margin-top: 10px;"> 
         <el-alert title="" :type="dtkData[index].isRight==1?'success':'error'" :closable="false">
        <template #title>
          你的回答为【{{ dtkData[index].youOption }}】 正确回答为【{{ dtkData[index].okOption }}】
        </template>
        </el-alert></div>
        <div style="margin-top: 5px;"> 
         <el-alert type="error" :closable="false">
        <template #title>
          本题回答错误人员有({{dtkData[index].errorList.length}})人：{{ dtkData[index].errorList.join(",")}}
        </template>
        </el-alert></div>
       
        <div style="display: flex; margin-top: 10px;">
          <div style="flex: 1;"><el-button style="width: 97%;" @click="prev"
            :disabled="index<=0">上一题</el-button></div>
          <div style="flex: 1;"><el-button  type="primary" style="width: 100%;" @click="next"
            :disabled="index>=dtkData.length-1">下一题</el-button></div>
        </div>




        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style>
</style>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getSingleArrange, getSingleDatika, yueJuan } from '../../../api/arrange'
import { ElMessage, ElMessageBox } from 'element-plus'
import { closeLoad, openLoad } from '@/utils/loading'

export default defineComponent({
  setup() {
    const routes = useRoute();
    const router = useRouter();
    const data = reactive({
      xuan:["A","B","C","D","E","F","G"],
      index: 0,
      id: routes.params.id,
      data: [],
      /**
       * 开始时间
       */
      beginTime: '',
      visibles: '',
      /**
       * 结束时间
       */
      endTime: '',
      /**
       * 是否阅卷 1未阅卷 0已经阅卷
       */
      isCheck: 0,
      /**
       * 阅卷时间
       *  */
      finishTime: '',
      isFinish: 0,
      /**
       * 及格人数
       */
      passCount: 0,
      /**
       * 及格率
       */
      stopCountDown: 0,
      /**
       * 平均分
       */
      avgScore: 0,
      /**
       * 答题详情
       */
      userExams: [],
      name: '',
      /**
       * 确认按钮
       */
      ok_btn: true,
      /**
       * 详情页面判断判断 考试状态的条件之一
       */
      weikaishi: false,
      kaoshizhong: false,
      isFirst: true,
      btnLoad: false,
      isLoad: false,
      dialogTableVisible: false,
      //答题卡标题
      titleName: '',
      //答题卡数据
      dtkData: [
        {
          answer: '',
          content: '',
          errorList: [],
          fraction: 0,
          isRight: 0,
          options: [],
          qid: '',
          rightAnswer: '',
          score: 0
        }
      ],
    })

    const events = {

      next(){
        if(data.index>=data.dtkData.length-1){
          return
        }
           data.index=data.index+1;
      },

      prev(){
        if(data.index<=0){
          return
        }
           data.index=data.index-1;
      },
     
      //选中哪个跳到哪个题目
      checkOptions:(val:any)=>{
             data.index=val;
      },
     
      //获取答题卡数据
      getAnswerSheets(val: any) {
        data.dialogTableVisible = true
        console.log(data.data)
        data.titleName = `${data.data.name}·答题卡·${val.name}`
        getSingleDatika({ id: val.id }).then((res: any) => {
          console.log(res)
          if (res.result === 0) {
            res.data.map((d:any)=>{
                   d.options.map((e:any,i:any)=>{
                       if(e.isRight==1){
                          d.okOption=data.xuan[i];
                       }

                       if(d.answer==e.id){
                          d.youOption=data.xuan[i];
                       }
                   })
            })
            data.dtkData = res.data;
            console.log(data.dtkData, ':LLLJKKHK')
          }
        })
      },
      /**
       * 完成阅卷按钮点击事件
       */
      complete_review: () => {
        let userexams: any = data.userExams.map((d: any) => {
          return { details: [], isAbsent: d.isAbsent, uid: d.uid }
        })

        ElMessageBox.confirm('确认完成阅卷吗?')
          .then((res: any) => {
            openLoad('请稍后')
            yueJuan({ id: data.id, userExams: userexams }).then((res: any) => {
              if (res.result === 0) {
                closeLoad()
                ElMessage.success(res.message)
                router.go(-1)
              } else {
                ElMessage.error(res.message)
              }
            })
          })
          .catch(() => {})
      },
      /**
       * 确认阅卷/与取消阅卷
       */
      verify: (row: any) => {
        data.userExams.map((d: any) => {
          //满足条件确认变取消
          if (row.uid == d.uid && row.isAbsent == 1 && row.isCheck == 0) {
            d.isCheck = 1
            d.isAbsent = 0
            //满足条件取消变确认
          } else if (row.uid == d.uid && row.isAbsent == 0 && row.isCheck == 1) {
            d.isCheck = 0
            d.isAbsent = 1
          }
          return d
        })
        //看是否全部阅卷完成 完成则返回true
        const ok = data.userExams.every((d: any) => d.isAbsent == 0 && d.isCheck == 1)
        if (ok) {
          data.ok_btn = false
        } else {
          data.ok_btn = true
        }
      },
      /**
       * 获取去阅卷页面显示的数据
       */
      getSingleArrange: () => {
        data.isFirst = true
        getSingleArrange({ id: data.id }).then((res: any) => {
          if (res.result === 0) {
            data.data = res.data
            data.name = res.data.name
            data.beginTime = res.data.beginTime
            data.endTime = res.data.endTime
            data.isCheck = res.data.isChick
            data.finishTime = res.data.finishTime
            data.passCount = res.data.passCount
            data.stopCountDown = res.data.stopCountDown
            data.avgScore = res.data.avgScore
            data.userExams = res.data.userExams
            data.isFinish = res.data.isFinish
            let now = new Date().getTime()
            let begin = new Date(res.data.beginTime).getTime()
            let end = new Date(res.data.endTime).getTime()
            if (begin > now) {
              data.weikaishi = true
            } else if (now > end) {
              data.weikaishi = false
              data.kaoshizhong = false
            } else if (now > begin && now < end) {
              data.kaoshizhong = true
            }

            if (
              (res.data.isCheck == 0 && res.data.isFinish == 0) ||
              (res.data.isCheck == 1 && res.data.isFinish == 1)
            ) {
              data.visibles = 'none'
            } else {
              data.visibles = ''
            }
            data.isFirst = false
          }
        })
      }
    }

    watchEffect(() => {
      events.getSingleArrange()
    })

    return {
      ...toRefs(data),
      ...events
    }
  }
})
</script>



<style scoped>

.oa>div{
    border: 1px solid #eee;
    padding: 10px;
    margin-top: 10px;
    margin-left: 5px;
    border-radius: 5px;
}

.okOptions{
  border: 2px solid #67C23A !important;
}

.errorOptions{
  border: 2px solid rgb(245, 108, 108) !important;
}

.content {
  padding: 10px;
  margin-top: 10px;
}

.top {
  padding: 10px;
  display: flex;
  margin-top: 10px;
}

.top-xuan-green {
  float: left;
  width: 30px;
  height: 30px;
  background: #e1f3d8;
  line-height: 30px;
  margin-left: 8px;
  text-align: center;
  border-radius: 4px;
  color: #67c23a;
}

.top-xuan-green:hover,.top-xuan-green:focus {
  background: #67c23a !important;
  color: #fff;
}

.top-xuan-red {
  float: left;
  width: 30px;
  height: 30px;
  background: #fde2e2;
  line-height: 30px;
  margin-left: 8px;
  text-align: center;
  border-radius: 4px;
  color: #f56c6c;
}

.top-xuan-red:hover {
  background: #f56c6c !important;
  color: #fff;
}

.dtkTag {
  background: #409eff;
  border-radius: 0 40px 40px 0;
  height: 35px;
  padding-right: 10px;
  line-height: 35px;
  width: 90px;
  position: relative;
  right: 16px;
  color: #fff;
  text-align: end;
}
.dialog_box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  border-radius: 6px;
}

.header {
  margin: 10px;
  border: 1px solid #eee;
  height: 50px;
  line-height: 44px;
  border-radius: 6px;
}

.mySearch_import {
  width: 400px;
  margin: auto;
}

.btn_import {
  float: left;
  margin-left: 10px;
}

.content_import {
  margin: 10px;
}
</style>
